import { ComponentWithStore } from 'mobx-miniprogram-bindings'
import { userStore } from '@/stores/userStore'
import {
  reqCartList,
  reqUpdateChecked,
  reqAllChecked,
  reqAddCart,
  reqDelCartGoods
} from '@/api/cart'
// 引入防抖函数
import { debounce } from 'miniprogram-licia'
// 导入让滑块自动弹回的behavior
import { swipeCellBehavior } from '@/behaviors/swipeCell'
const computedBehavior = require('miniprogram-computed').behavior

ComponentWithStore({
  behaviors: [computedBehavior, swipeCellBehavior],

  storeBindings: {
    store: userStore,
    fields: ['token']
  },

  computed: {
    // 判断是否是全选 从而控制全选按钮的选中效果
    // 计算属性会被挂载到data对象中
    selectAll(data) {
      // computed中不能通过this访问data中的数据
      // 想要访问 需要通过data形参
      return (
        data.cartList.length !== 0 && data.cartList.every((item) => item.isChecked === 1)
      )
    },

    // 计算商品总金额
    totalPrice(data) {
      let totalPrice = 0
      data.cartList.forEach((item) => {
        //判断商品是否为选中状态
        if (item.isChecked === 1) {
          totalPrice += item.price * item.count
        }
      })
      return totalPrice
    }
  },

  // 组件的初始数据
  data: {
    cartList: [],
    emptyDes: '还没有添加商品，快去添加吧～'
  },

  // 组件的方法列表
  methods: {
    // 更新购买的数量
    changeBuyNum: debounce(async function (event) {
      const newBuyNum = event.detail > 200 ? 200 : event.detail
      // 获取商品的id、索引、之前的购买数量
      const { id, index, oldbuynum } = event.target.dataset
      // 使用正则验证用户输入的购买数量 是否是1-200的正整数
      const reg = /^([1-9]|[1-9]\d|1\d{2}|200)$/
      const resReg = reg.test(newBuyNum)
      // 如果验证失败 说明用户输入不合法或小于1 需要还原为之前的数量
      if (!resReg) {
        this.setData({
          [`cartList[${index}].count`]: oldbuynum
        })
        return
      }
      // 验证通过 计算差值 然后发送给服务器
      const disCount = newBuyNum - oldbuynum
      // 如果购买数量没有改变 不发送请求
      if (disCount === 0) return
      // 购买数量改变 调用接口 传递差值
      const res = await reqAddCart({ goodsId: id, count: disCount })
      // 如果服务器更新成功 需要更新本地数据
      if (res.code === 200) {
        this.setData({
          [`cartList[${index}].count`]: newBuyNum,
          // 如果购买数量发生了变化 需要让当前商品变为选中状态
          [`cartList[${index}].isChecked`]: 1
        })
      }
    }, 500),

    // 删除购物车商品
    async deleteCartGoods(event) {
      const { id } = event.currentTarget.dataset
      const modalRes = await wx.modal({
        content: '您确定删除该商品吗？'
      })
      if (modalRes) {
        await reqDelCartGoods(id)
        this.showTipGetList()
      }
    },

    // 展示文案同时获取购物车列表数据
    async showTipGetList() {
      const { token } = this.data
      if (!token) {
        this.setData({
          emptyDes: '您尚未登录，点击登录获取更多权益',
          cartList: []
        })
        return
      }
      const { code, data: cartList } = await reqCartList()
      if (code === 200) {
        this.setData({
          cartList,
          emptyDes: cartList.length === 0 && '还没有添加商品，快去添加吧~'
        })
      }
    },

    // 全选按钮回调
    async selectAllChange(event) {
      const { detail } = event
      // 将数据转换为0|1
      const isChecked = detail ? 1 : 0
      const res = await reqAllChecked(isChecked)
      if (res.code === 200) {
        // this.showTipGetList()

        // 对购物车列表数据进行深拷贝
        const newCartList = JSON.parse(JSON.stringify(this.data.cartList))
        newCartList.forEach((item) => {
          item.isChecked = isChecked
        })

        this.setData({
          cartList: newCartList
        })
      }
    },

    // 更新商品的购买状态
    async updateChecked(event) {
      // 获取最新的购买状态
      const { detail } = event
      // 获取传递的商品id和索引
      const { id, index } = event.target.dataset
      // 将最新的购买状态转换成后端接口所需要使用的0和1
      const isChecked = detail ? 1 : 0
      const res = await reqUpdateChecked(id, isChecked)
      if (res.code === 200) {
        // 更新成功以后 获取最新购物车数据
        // this.showTipGetList()

        // 更改本地的选中状态
        this.setData({
          [`cartList[${index}].isChecked`]: isChecked
        })
      }
    },

    // 跳转到结算页面
    toOrder() {
      // 判断用户是否勾选了商品
      if (this.data.totalPrice === 0) {
        wx.toast({
          title: '请选择需要购买的商品'
        })
        return
      }
      wx.navigateTo({
        url: '/modules/orderPayModule/pages/order/detail/detail'
      })
    },

    onShow() {
      this.showTipGetList()
    },

    onHide() {
      this.closeSwipeCell()
    }
  }
})
